<template>
  <div class="detail-container">
    <div>
      <div class="title">
        网口参数
      </div>
      <div class="area">
        <div class="content">WAN</div>
        <div class="content">
          <span>联网方式:</span>
          <span>{{wanInfo.wan.toUpperCase() || '--'}}</span>
        </div>

        <div class="content">
          <span>首选DNS地址:</span>
          <span>{{wanInfo.dns || '--'}}</span>
        </div>

        <div class="content">
          <span>备选DNS地址:</span>
          <span>{{wanInfo.dns1 || '--'}}</span>
        </div>
      </div>
      <div class="area">
        <div class="content">LAN1</div>
        <div class="content">
          <span>IP地址:</span>
          <span>{{lanInfo.lan0.ipaddr || '--'}}</span>
        </div>

        <div class="content">
          <span>子网掩码:</span>
          <span>{{lanInfo.lan0.netmask || '--'}}</span>
        </div>

        <div class="content">
          <span>网关:</span>
          <span>{{lanInfo.lan0.gateway || '--'}}</span>
        </div>

        <div class="content">
          <span>网卡速率:</span>
          <span>{{speedType[lanInfo.lan0.speed] || '--'}}</span>
        </div>
      </div>
      <div>
        <div class="content">LAN2</div>
        <div class="content">
          <span>IP地址:</span>
          <span>{{lanInfo.lan1.ipaddr || '--'}}</span>
        </div>

        <div class="content">
          <span>子网掩码:</span>
          <span>{{lanInfo.lan1.netmask || '--'}}</span>
        </div>

        <div class="content">
          <span>网关:</span>
          <span>{{lanInfo.lan1.gateway || '--'}}</span>
        </div>

        <div class="content">
          <span>网卡速率:</span>
          <span>{{speedType[lanInfo.lan1.speed] || '--'}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'gateway-detail',
  data () {
    return {
      speedType: {
        0: '自动',
        1: '10M半双工',
        2: '10M全双工',
        3: '100M半双工',
        4: '100M全双工'
      }
    }
  },
  props: {
    boxId: {
      type: String,
      default: ''
    },
    wanInfo: {
      type: Object,
      default: () => ({
        wan: '',
        wan1: '',
        dns: '',
        dns1: ''
      })
    },
    lanInfo: {
      type: Object,
      default: () => ({
        lan0: {
          dhcp: null,
          gateway: '',
          ipaddr: '',
          netmask: '',
          speed: null
        },
        lan1: {
          dhcp: null,
          gateway: '',
          ipaddr: '',
          netmask: '',
          speed: null
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.detail-container
  padding 19px 0 22px 20px
  .area
    margin-bottom 17.5px
  .title
    line-height 1
    font-size 16px
    font-weight 500
    color $primary
    margin-bottom 16px

  .content
    color #333333
    line-height 1.8
</style>
